<template>
  <div class="invoke-status panel line-panel">
    <header class="title">
      <b /> 当日{{typeName}}{{typeAction}}状态监控
    </header>
    <nav class="">
      <dl>
        <dt>
          <img src="../../../assets/screenboard/success-icon.png" alt="" />
        </dt>
        <dd>
          <div>{{typeAction}}成功</div>
          <h1>{{type=='service'?infoData?.daySvcInvokeSuccessNum:infoData?.dayEvtInvokeSuccessNum}}</h1>
        </dd>
      </dl>
      <dl>
        <dt>
          <img src="../../../assets/screenboard/error-icon.png" alt="" />
        </dt>
        <dd>
          <div>{{typeAction}}失败</div>
          <h1>{{type=='service'?infoData?.daySvcInvokeFailNum:infoData?.dayEvtInvokeFailNum}}</h1>
        </dd>
      </dl>
    </nav>
    <main>
      <header>当日调用失败预警</header>
      <nav>
        <div class="state">{{typeName}}名称</div>
        <div class="date">{{typeAction}}时间</div>
        <div class="content">{{typeAction}}状态</div>
      </nav>
      <ul
        v-infinite-scroll="getListData"
        :infinite-scroll-disabled="query.current>=Math.floor(query.total/query.size)"
        v-show="listData.length > 0"
        ref="listRef"
        class="list"
        style="overflow: auto"
      >
        <li
          v-for="(item, index) in listData"
          :key="item.id"
          class="list-item"
        >
          <div class="state" >{{type=="service"?item.svcName:item.evtName}}</div>
          <div class="date">{{ parseTime(item.requestTime) }}</div>
          <div :class="item.httpStatus==200 ? 'content' : 'content error'">{{ item.httpStatus==200?'成功':'失败' }}</div>
        </li>
      </ul>
      <div class="no-data" v-if="listData.length == 0">
        暂无数据
      </div>
    </main>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed,watch,onBeforeUnmount } from 'vue'
import { getEvtErrorList,getSvcErrorList } from '@/api/statistics'
import { parseTime } from '@/utils'

export default {
  name: 'InvokeStatus',
  props: {
    type: {
      type: String,
      default: 'service'
    },
    code: {
      type: String,
      default: ''
    },
    refresh: {
      type: Number,
    },
    counts: {
      type: Object,
      default: () => {}
    }
  },
  setup(props) {
    const listData = ref([])
    const infoData = computed(() => {
      return props.counts
    })
    const query = reactive({
      current: 1,
      size: 20,
      total: 0
    })
    const typeName = computed(() => {
      return props.type=='service'?'服务':'事件'
    })
    const typeAction = computed(() => {
      return props.type=='service'?'调用':'推送'
    })
    const getListData = async() => {
      const para = {areaCode: props.code,...query}
      const res = props.type=='service'? await getSvcErrorList(para): await getEvtErrorList(para)
      if (res.status === 200) {
        if (res.data.list.length === 0) {
          currentScroll.value = 0
        }
        listData.value = [...listData.value, ...res.data.list]
        query.current = res.data.current + 1
        query.total = res.data.total
      }
    }

    const timer = ref(null)
    const listRef = ref(null)
    const currentScroll = ref(0)
    const handleScroll = () => {
      listRef.value.scrollTo(0, 50*currentScroll.value) 
    }
    watch(() => props.code, () => {
      listData.value = []
      query.current = 1
      init()
    });
    watch(() => props.refresh, () => {
      listData.value = []
      query.current = 1
      init()
    });
    onBeforeUnmount(() => {
      clearInterval(timer.value)
      timer.value = null
    })
    const init = async() => {
      currentScroll.value = 0
      clearInterval(timer.value)
      listRef.value.scrollTo(0, 0) 
      timer.value = null
      getListData()
      timer.value = setInterval(() => {
        currentScroll.value += 1
        handleScroll()
      }, 3000)

    }
    onMounted(() => {
      // init()
    })
    return {
      query,
      listRef,
      infoData,
      listData,
      getListData,
      parseTime,
      typeName,
      typeAction
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';

</style>